<template>
  <div class="login_container">
    <img src="../assets/logo-treasure.svg" class="img" alt="" />
    <van-cell-group   class="login_form">
      <van-field  v-model="email" :label-width="50" left-icon="manager" label=" 邮箱 " clearable :error="isEmailError"
        placeholder=" 请输入你的邮箱 " @focus="focusHandle1" @keypress.enter="handleRegister1" />
    </van-cell-group>
    <van-button class="login_btn" type="primary" :loading="emailshowLoading" loading-type="spinner" block
      :loading-text="loadEmail" @click="handleRegister1"> 发送验证码
    </van-button>
    <van-cell-group   class="login_form">
        <van-field  v-model="yanzhenma" :label-width="50" left-icon="lock" label=" 验证码 " clearable :error="isyanzhenmaError"
        placeholder=" 请输入你收到的验证码 " @focus="focusHandle2" @keypress.enter="handleRegister2" />
    </van-cell-group>
    <van-button class="login_btn" type="primary" :loading="zhaohuishowLoading" loading-type="spinner" block
      :loading-text="loadzhaohui" @click="handleRegister2"> 找回密码
    </van-button>
  </div>
</template>
  <script>
import { Toast } from 'vant';


export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: '注册',
  data() {
    return {
      isEmailError: false, // 账号为空时显示
      isyanzhenmaError: false, // 密码为空时显示
      emailshowLoading: false, // 是否加载 loading
      zhaohuishowLoading: false, // 是否加载 loading
      loadEmail:"",
      loadzhaohui:"",
      email: "",
      yanzhenma: ""
      };
  },
  beforeDestroy() {
    this.emailshowLoading = false;
    this.zhaohuishowLoading = false;
    this.loadmessage = "";
    this.loadzhaohui = "";
  },
  methods: {
    focusHandle1() {
      this.isEmailError = false;
    },
    focusHandle2() {
      this.isyanzhenmaError = false;
    },
    handleRegister1() {
      this.emailshowLoading = true;
      this.loadEmail = "发送邮件中";
      this.axios({
        method: "POST",
        url: "/aapi/fsyzm",
        data: {
          "mail": this.email,
        }
      }).then(response => {
        if (response.status === 200) {
          setTimeout(() => {
            Toast.success('邮件发送成功,请在1分钟内输入验证码');
            this.emailshowLoading = false;
          }, 1500);
        }
      })
      .catch((error) =>{
          this.isEmailError = true
          Toast.fail(error.response.data)
          this.message = error.response.data
          this.emailshowLoading = false;
          this.loadEmail = "";
      });
    },
    handleRegister2() {
      this.zhaohuishowLoading = true;
      this.loadzhaohui = "服务器验证中";
      this.axios({
        method: "POST",
        url: "/aapi/yanzheng",
        data: {
          "mail": this.email,
          "pasw": this.yanzhenma,
        }
      }).then(response => {
        if (response.status === 200) {
          setTimeout(() => {
            Toast.success('验证成功,你的密码已经重置为123456');
            this.zhaohuishowLoading = false;
            this.$router.push("/login");
          }, 3000);
        }
      })
      .catch((error) =>{
          this.isyanzhenmaError = true
          Toast.fail('验证失败')
          this.zhaohuishowLoading = false;
          this.loadzhaohui = "";
      });
    }
  }
};
</script>

  <style scoped>
  .login_container {
    position: relative;
    padding: 5% 20px;
    display: flex;
    flex-direction: column;
  }
  
  .login_container .img {
  
    width: 130px;
    height: 130px;
    margin: 30px auto;
  
  }
  
  
  .go_register {
    color: #1989fa;
    font-size: 14px;
  
  }
  
  .go_register:first-child {
    margin-right: 10px;
  }
  

  
  
  .login_container .login_btn {
    margin-top: 50px;
  }
  
  .login_container .login_zhe {
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
  
  }
  
  .login_zhe p:first-child {
    font-size: 14px;
  }
  
  .login_zhe p:nth-child(2) {
    color: #888;
  }
  .child-view{
    position: relative;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    transition: all .5s cubic-bezier(.55, 0, .1, 1);
  }
  </style>
